<template>
  <div id="video-contianer">
    <div id="video-contianer">
      <div
        id="divPlugin"
        class="plugin"
        ref="video"
        style="
          width: 800px;
          height: 500px;
          margin-left: 50%;
          transform: translateX(-50%);
        "
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "videoCom",
  computed: {
    ...mapState(['szIP', 'szPassword', 'szDeviceIdentify'])
  },
  data() {
    return {
      iPrototocol: 1, //http协议，1表示http协议，2表示https协议
      iPort: "80", //登录设备的端口号
      szUserName: "admin", //摄像头登录账号
    };
  },

  created() {
    this.init();
    this.types = localStorage.getItem("textType");
  },
  mounted() {},
  beforeDestroy() {
    this.logOut();
    this.stopALLPlay();
  },
  destroyed() {
    setTimeout(() => {
      this.breakDom();
    }, 500);
  },
  methods: {
    init() {
      const self = this;
      WebVideoCtrl.I_InitPlugin({
        iWindowType: 1, //画面分割数，1就是1*1,2就是2*2
        bWndFull: false, //是否支持双击全屏
        cbInitPluginComplete: function () {
          //检查插件是否最新
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
            () => {
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  alert("检测到新的插件版本，请及时更新");
                }
              });
              // 插件初始化完成后执行登录和预览
              self.login();
            },
            () => {
              alert("插件初始化失败，请确认是否安装了插件");
            }
          );
        },
      });
    },
    login() {
      const self = this;
      WebVideoCtrl.I_Login(
        this.szIP,
        this.iPrototocol,
        this.iPort,
        this.szUserName,
        this.szPassword,
        {
          success: function (e) {
            console.log("登录成功，设备信息：", e);
            setTimeout(() => {
              self.see();
            }, 500);
          },
          error: function () {
            console.log("登录失败!");
          },
        }
      );
    },
    see() {
      WebVideoCtrl.I_StartRealPlay(this.szIP + "_" + this.iPort, {
        success: () => {
          console.log("预览成功！");
        },
        error: (err) => {
          console.error("预览失败，错误信息：", err);
        },
      });
    },
    stopPlay() {
      WebVideoCtrl.I_Stop({
        iWndIndex: 1, //想要停止的某个窗口
        success: () => {
          console.log("停止成功！");
        },
        error: (err) => {
          console.error("停止失败，错误信息：", err);
        },
      });
    },
    stopALLPlay() {
      WebVideoCtrl.I_StopAllPlay();
      console.log("停止成功!");
    },
    logOut() {
      WebVideoCtrl.I_Logout(this.szDeviceIdentify);
      console.log("登出成功!");
    },
    breakDom() {
      WebVideoCtrl.I_DestroyPlugin();
      console.log("注销成功!");
    },
  },
};
</script>

<style scoped lang="scss">
.active-video-border {
  border: 2px salmon solid;
}
#video-contianer {
  position: relative;
  // width: 100%;
  // height: 100%;
  margin: 100px auto;
  .video {
    margin: 0 auto;
    // width: 100%;
    // height: 100%;
    // object-fit: cover;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>
